<template>
  <div>
    <!-- <h3 class="title">登录页面</h3> -->
    <!-- <to-back></to-back> -->
    <div class="cont">
      <img class="cont_img" :src="require('../../assets/img/logo.png')" alt />
      <div class="form">
        <!-- <div>
          角色：
          <select name id v-model="type">
            <option value="1">法师</option>
            <option value="2">狼人</option>
          </select>
        </div> -->
        <div>
          <input type="text" v-model="user.phone" placeholder="请输入手机号" />
          <input type="text" v-model="user.password" placeholder="请输入密码" />
        </div>
        <!-- 点击登录，跳转到index页面 -->
        <button @click="login">登录</button>
        <button @click="$router.push('/register')">去注册</button>
      </div>
    </div>
    <div>
      <!-- <router-link to="/register">去注册</router-link> -->
      <!-- <button>登录</button> -->
      <!-- <router-link to="/index">大首页 index</router-link> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

// Vue.use(Toast);
import { reqLogin } from "../../http/http.js";
export default {
  data() {
    return {
      type: "1", //角色
      user: {
        phone: "123",
        password: "123"
      }
    };
  },
  methods: {
    login() {
      console.log(this.user);
      if (this.type == "") {
        alert("请选择角色");
        return;
      }

      // 发请求
      reqLogin(this.user).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          // 成功
          Toast(res.data.msg);
          // alert(res.data.msg);
          // 将用户信息存储到本地
          localStorage.setItem("user", JSON.stringify(res.data.list));
          // 存储用户登录信息
          localStorage.setItem("isLogin", true);
          //将角色存起来
          localStorage.setItem("type", this.type);

          //跳页面
          this.$router.push("/index/home");
        } else {
          // 失败
          alert(res.data.msg);
        }
      });

      /*   // 登录拦截 
     if (this.user.name == "admin" && this.user.pass == "123") {
        // alert("登录成功");
        // 跳转页面之前存储信息：在登录成功的时候设计一个标识，存到了本地存储，用来后期判断是否登录
        // 存进去的都是字符串  true ="true"
        localStorage.setItem("isLogin", true);
        //将角色存起来
        localStorage.setItem('type',this.type)

        //跳页面
        this.$router.push("/index/home");
      } else {
        alert("账号密码错误");
      } */
    }
  }
};
</script>

<style scoped lang="less"> 
.box {
  margin: 0.2rem;
  padding: 0.2rem;
}
h3 {
  margin-top: 0.9rem;
}
.cont {
  width: 5.2rem;
  height: 4.15rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cont_img {
  width: 3.1rem;
  height: 0.82rem;
  padding: 0 1.05rem;
}
.form {
  margin-top: 0.6rem;
}
input {
  border: none;
  background: none;
  width: 100%;
  height: 0.64rem;
  line-height: 0.64rem;
  border-bottom: 0.01rem solid #ccc;
  color: #ccc;
  font-size: 0.3rem !important;
}
button{
  border:none;
  background-color: none;
  width: 100%;
  height: 0.98rem;
  margin-top: 0.38rem;
  line-height: 0.98rem;
  font-size: 0.27rem;
  color: #fff;
  background-color: #ccc;
}
</style>